<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value=""></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            </h:panelGroup>
            <h:form>
                <p:growl id="growl" showSummary="true" showDetail="true" autoUpdate="true"/>  

                <p:fieldset style="white-space:nowrap;">  
                    <h:panelGrid columns="8" columnClasses="formColumn,,formColumn,,formColumn,,formColumn,,">  
                        <h:outputText value="Selectable"/>  
                        <p:selectBooleanButton id="selectable" onLabel="Yes" offLabel="No"  
                                               value="#{basicTimelineController.selectable}">  
                            <p:ajax event="change" process="@this" update="timeline"/>  
                        </p:selectBooleanButton>  

                        <h:outputText value="Zoomable"/>  
                        <p:selectBooleanButton id="zoomable" onLabel="Yes" offLabel="No"  
                                               value="#{basicTimelineController.zoomable}">  
                            <p:ajax event="change" process="@this" update="timeline"/>  
                        </p:selectBooleanButton>  

                        <h:outputText value="Moveable"/>  
                        <p:selectBooleanButton id="moveable" onLabel="Yes" offLabel="No"  
                                               value="#{basicTimelineController.moveable}">  
                            <p:ajax event="change" process="@this" update="timeline"/>  
                        </p:selectBooleanButton>  

                        <h:outputText value="Stack Events"/>  
                        <p:selectBooleanButton id="stackEvents" onLabel="Yes" offLabel="No"  
                                               value="#{basicTimelineController.stackEvents}">  
                            <p:ajax event="change" process="@this" update="timeline"/>  
                        </p:selectBooleanButton>  

                        <h:outputText value="Event Style"/>  
                        <p:selectOneButton id="eventStyle"  
                                           value="#{basicTimelineController.eventStyle}">  
                            <f:selectItem itemLabel="Dot" itemValue="dot"/>  
                            <f:selectItem itemLabel="Box" itemValue="box"/>  
                            <p:ajax event="change" process="@this" update="timeline"/>  
                        </p:selectOneButton>  

                        <h:outputText value="Axis On Top"/>  
                        <p:selectBooleanButton id="axisOnTop" onLabel="Yes" offLabel="No"  
                                               value="#{basicTimelineController.axisOnTop}">  
                            <p:ajax event="change" process="@this" update="timeline"/>  
                        </p:selectBooleanButton>  

                        <h:outputText value="Show Current Time"/>  
                        <p:selectBooleanButton id="currentTime" onLabel="Yes" offLabel="No"  
                                               value="#{basicTimelineController.showCurrentTime}">  
                            <p:ajax event="change" process="@this" update="timeline"/>  
                        </p:selectBooleanButton>  

                        <h:outputText value="Show Navigation"/>  
                        <p:selectBooleanButton id="navigation" onLabel="Yes" offLabel="No"  
                                               value="#{basicTimelineController.showNavigation}">  
                            <p:ajax event="change" process="@this" update="timeline"/>  
                        </p:selectBooleanButton>  
                    </h:panelGrid>  
                </p:fieldset>  

                <p:spacer width="100%" height="10"/>  

                <pe:timeline id="timeline" value="#{basicTimelineController.model}" height="250px"  
                             selectable="#{basicTimelineController.selectable}"  
                             zoomable="#{basicTimelineController.zoomable}"  
                             moveable="#{basicTimelineController.moveable}"  
                             stackEvents="#{basicTimelineController.stackEvents}"  
                             axisOnTop="#{basicTimelineController.axisOnTop}"               
                             eventStyle="#{basicTimelineController.eventStyle}"  
                             showCurrentTime="#{basicTimelineController.showCurrentTime}"  
                             showNavigation="#{basicTimelineController.showNavigation}">  
                    <p:ajax event="select" listener="#{basicTimelineController.onSelect}"/>  
                </pe:timeline>  

                <h:outputStylesheet id="timelineCSS" name="df">  
                    table .formColumn {  
                    padding: 0 5px 0 20px;  
                    text-align: right;  
                    white-space: nowrap;  
                    }         
                </h:outputStylesheet>  


            </h:form>
        </ui:define>
    </ui:composition>

</html>
